<template>
	<view class="exchange-page">
		<view class="id-box">
			<view class="label">用户ID：</view>
			<input class="input" type="text" v-model="form.member_id" placeholder="请输入用户ID" />
		</view>
		
		<view class="card-box">
			<view class="top-box">
				<view class="label">{{ config.trade_currency }}转账</view>
				<input class="input" type="number" v-model="form.num" placeholder="请输入数量" />
			</view>
			<view class="bottom-box">
				<view class="number">可用{{ config.trade_currency }}（{{ userInfo.deposit }}）</view>
				<view class="tips">确认后输入</view>
			</view>
		</view>
		
		<view class="button-box">
			<button class="btn" :disabled="btnDisabled" @click="confirm">下一步</button>
		</view>
		
		<u-popup :show="show" mode="bottom" round="20rpx" closeable @close="popupClose">
			<view class="popup-box">
				<view class="title-box">请输入支付密码</view>
				<view class="popup-content">
					<u-code-input v-model="code" dot></u-code-input>
				</view>
				<u-number-keyboard
					:random="false"
					:dotDisabled="true"
					mode="number"
					@backspace="keyboardBackspace"
					@change="keyboardChange"
				></u-number-keyboard>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { transfer, getMaterial, getConfig } from '@/api/api'

	export default {
		data () {
			return {
				userInfo: {},
				config: {},
				
				form: {
					member_id: '',
					num: '',
					tradepwd: ''
				},
				
				/* 支付密码弹窗 */
				show: false,
				code: '',
			}
		},
		onLoad () {
			getMaterial().then(res => {
				if (res) {
					this.userInfo = res.data.data
				}
			})
			
			getConfig().then(res => {
				if (res) {
					this.config = res.data
				}
			})
		},
		methods: {
			confirm () {
				if (this.userInfo.is_pwd != 1) {
					uni.showModal({
						content: '您暂未设置支付密码',
						confirmText: '去设置',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/my/payPass/setPayPass'
								})
							}
						}
					})
					return
				}
				
				if (Number(this.userInfo.deposit) < Number(this.form.num)) {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					})
					return
				}
				
				this.show = true
			},
			popupClose () {
				this.show = false
				this.code = ''
			},
			keyboardChange (val) {
				if (this.code.length < 6) {
					this.code += val
					
					if (this.code.length === 6) {
						this.form.tradepwd = this.code
						this.show = false
						
						this.transferConfirm()
					}
				}
			},
			keyboardBackspace () {
				if (this.code.length) {
					this.code = this.code.substr(0, this.code.length - 1)
				}
			},
			transferConfirm () {
				transfer(this.form).then(res => {
					if (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						
						setTimeout(() => {
							uni.navigateBack({
								fail: () => {
									uni.switchTab({
										url: '/pages/my/my'
									})
								}
							})
						}, 500)
					}
				})
			}
		},
		computed: {
			btnDisabled () {
				return !(this.form.member_id && this.form.num)
			}
		}
	}
</script>

<style lang="scss">
.exchange-page {
	box-sizing: border-box;
	padding: 24rpx;
	min-height: 100%;
	background-color: $bg-color;
	.id-box {
		height: 166rpx;
		padding: 0 40rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		.label {
			color: #333333;
			font-size: 32rpx;
		}
		.input {
			flex: 1;
		}
	}
	.card-box {
		margin-top: 24rpx;
		padding: 0 40rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.top-box {
			padding: 40rpx 0 26rpx;
			border-bottom: 1rpx solid #eee;
			.label {
				color: #333;
				font-size: 26rpx;
			}
			.input {
				margin-top: 32rpx;
				width: 100%;
				font-size: 40rpx;
				font-weight: bold;
			}
			.input-placeholder {
				color: #999;
			}
		}
		.bottom-box {
			height: 102rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.number {
				color: #333;
			}
			.tips {
				color: #999;
			}
		}
	}
	.button-box {
		margin-top: 180rpx;
		.btn {
			height: 86rpx;
			border-radius: 86rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			background-color: #5749f7;
			&[disabled] {
				color: #d6d6d6;
				background-color: #999999;
			}
		}
	}
	.popup-box {
		.title-box {
			height: 88rpx;
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			line-height: 88rpx;
		}
		.popup-content {
			padding: 32rpx;
			display: flex;
			justify-content: center;
		}
	}
}
</style>
